<template>
	<view class="box">
		<view class="box-1">
			<slot></slot>
			<input type="text"
				:placeholder="placeholder" 
				:password="password"
				:focus="focus"
				@input="val"
				:value="value"/>
		</view>
		<view class="message">{{ message }}</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		name: 'my-input',
		props: {
			placeholder: {
				type: String,
				default: ''
			},
			password: {
				type: Boolean,
				default: false
			},
			message: {
				type: String,
				default: ''
			},
			focus: Boolean,
			value: String
		},
		methods: {
			val(event) {
				this.$emit('val', event.detail.value)
			}
		}
	}
</script>

<style scoped>
	input{
		padding: 0 5rpx;
		width: calc(600rpx - 30px);
		font-size: 17px;
		border-bottom: 1px solid;
		margin-left: 20rpx;
		background-color: transparent;
	}
	
	.box{
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.box-1{
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	
	.message{
		width: calc(600rpx - 11px);
		color: red;
		padding-left: 55rpx;
		overflow: hidden;
		overflow-wrap: normal;
		text-overflow: ellipsis;
	}
</style>
